<template>
        <!-- 父组件传来的menuData -->
      <template v-for="(item,index) in props.menuData">
        <!-- 普通菜单项（无children或children为空） -->
         <!-- `${props.index}-${item.meta.id}`确保递归时每个层级的 ID 唯一
          （例如：一级菜单1-1，二级菜单1-1-2） -->
        <el-menu-item 
        @click="handleClick(item,`${props.index}-${item.meta.id}`)"
        v-if="!item.children|| item.children.length == 0" 
        :index="`${props.index}-${item.meta.id}`"
        :key="`${props.index}-${item.meta.id}`">
          <!-- 动态渲染对应的图标组件 -->
          <el-icon size="20">
            <component :is="item.meta.icon"></component>
          </el-icon>
         <span>{{ item.meta.name }}</span> 

        </el-menu-item>
           <!-- 子菜单容器（有children） -->
          <el-sub-menu v-else :index="`${props.index}-${item.meta.id}`">
            <template #title>
                <el-icon size="20">
                    <!-- 动态组件渲染 is的值来决定渲染哪个组件 -->
                    <component :is="item.meta.icon" />
                </el-icon>
                <span>{{ item.meta.name }}</span>
            </template>
            <!-- 递归组件调用自身tree-menu -->
            <tree-menu :index="`${props.index}-${item.meta.id}`" :menuData="item.children" />
        </el-sub-menu>

      </template>
        
</template>

<script setup>
import { useRouter } from 'vue-router';
//用来实现tab的加入
import { useMenuStore } from '../store/menu'
const props = defineProps(['menuData','index'])
// console.log(props,'props')
//创建router实例实现跳转
const router = useRouter()
//用来实现tab的加入
const menuStore = useMenuStore()
//点击菜单
const handleClick = (item, active) => {
  // 跳转到对应路由
  router.push(item.meta.path)
  //实现tab的加入,记录选中菜单到 Pinia
  //调用add Menu，将item.meta传递给payload
  menuStore.addMenu(item.meta)
  //调用保存高亮方法
  menuStore.updateMenuActive(active)
}
</script>

<style lang="scss" scoped>

</style>